import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;
export class AddressComponent extends Component {
	constructor(props) {
		super(props);
	}
	render () {
		/* 
		addBtnText: 添加按钮文本
		addFn: 添加按钮绑定事件
		AddressListData : 存储地址数据
		itemRemoveFn : 删除单条地址事件
		*/
		let { addBtnText, addFn, AddressListData, itemRemoveFn, isOk } = this.props;
		return (
			<View style={styles.addressBox}>
				<View style={styles.addressHead}>
					{/* <Text style={styles.addressTitle}>{addBtnText}</Text>
					<Text
						style={[styles.addressTitle, styles.addressColor]}
						onPress={addFn}
					>添加</Text> */}
					<TouchableOpacity onPress={addFn} style={styles.addBtn}>
						<Text style={styles.addText}>添加{addBtnText}</Text>
					</TouchableOpacity>
					{isOk ? <Text style={styles.isOk}>{isOk}</Text> : null}
				</View>
				{
					AddressListData && AddressListData.map((item, index) => {
						return (
							<View style={styles.addressBody} key={index}>
								<Text style={styles.addressFont}>{item.addressName ? item.addressName : item.detailAddress}</Text>
								<Text style={styles.addressFontColor} onPress={() => { itemRemoveFn(index, AddressListData, addBtnText) }}>删除</Text>
							</View>
						)
					})
				}
			</View>
		)
	}
}
const styles = StyleSheet.create({
	addressBox: {
		marginTop: 17 * scale
	},
	addressHead: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	addressTitle: {
		fontSize: 12 * scale,
		color: style.color.darkGray,
		marginRight: 3 * scale
	},
	addressColor: {
		color: style.color.themeColor,
		lineHeight: 22 * scale,
		paddingLeft: 8 * scale,
		paddingRight: 8 * scale,
	},
	addressBody: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		height: 40 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
	},
	addressFont: {
		fontSize: 13 * scale,
		color: style.color.dark,
	},
	addressFontColor: {
		color: '#F66464',
		fontSize: 12 * scale,
		marginRight: 3 * scale,
		lineHeight: 22 * scale,
		paddingLeft: 8 * scale,
		paddingRight: 8 * scale,
	},
	addText: {
		color: '#0087FF',
		fontSize: 12 * scale,
		width: 100 * scale,
		lineHeight: 27 * scale,
		textAlign: 'center'
	},
	addBtn: {
		width: 100 * scale,
		height: 27 * scale,
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: '#89C8FF',
		backgroundColor: '#E2F2FF',
		borderRadius: 2 * scale,
	},
	isOk: {
		paddingLeft: 5 * scale,
		color: '#0087FF',
		fontSize: 12 * scale,
	}
})